<template>
  <div id="AddScoringResultPage">
    <h2 style="margin-bottom: 32px">设置评分</h2>

    <a-form
      :model="form"
      :style="{ width: '480px', margin: '0 auto' }"
      label-align="left"
      auto-label-width
      @submit="handleSubmit"
    >
      <a-form-item label="应用名称">
        {{ appId }}
      </a-form-item>
      <a-form-item v-if="updateID" label="修改评分id">
        {{ updateID }}
      </a-form-item>
      <a-form-item field="resultName" label="结果名称">
        <a-input v-model="form.resultName" placeholder="请输入结果名称" />
      </a-form-item>
      <a-form-item field="resultDesc" label="结果描述">
        <a-input v-model="form.resultDesc" placeholder="请输入结果描述" />
      </a-form-item>
      <a-form-item field="resultPicture" label="应用图标">
        <PicUploader
          biz="app_icon"
          :value="form.resultPicture"
          :on-change="(value) => (form.resultPicture = value)"
        />
      </a-form-item>
      <a-form-item field="resultProp" label="结果集">
        <a-input-tag
          v-model="form.resultProp"
          :style="{ width: '320px' }"
          placeholder="输入结果集"
          allow-clear
        />
      </a-form-item>

      <a-form-item field="resultScoreRange" label="结果得分范围">
        <a-input-number
          v-model="form.resultScoreRange"
          placeholder="请输入结果得分范围"
        />
      </a-form-item>

      <a-form-item>
        <a-space>
          <a-button type="primary" html-type="submit" style="width: 120px"
            >提交
          </a-button>
          <a-button
            type="primary"
            :href="`/app/detail/${props.appId}`"
            style="width: 120px"
            >返回
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <h2>评分管理</h2>
    <SocringResultTable :app-id="appId" :do-update="doUpdate" ref="tableRef" />
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, watchEffect, withDefaults } from "vue";
import { useLoginUserStore } from "@/store/userStore";
import meassage from "@arco-design/web-vue/es/message";
import API from "@/api";
import { useRouter } from "vue-router";

import PicUploader from "@/components/PicUploader.vue";
import message from "@arco-design/web-vue/es/message";
import {
  addScoringResultUsingPost,
  editScoringResultUsingPost,
} from "@/api/scoringResultController";
import SocringResultTable from "@/views/add/compoents/SocringResultTable.vue";

const loginUserStore = useLoginUserStore();
const tableRef = ref();

const form = ref({
  resultDesc: "",
  resultName: "",
  resultPicture: "",
} as API.ScoringResultAddRequest);

interface Props {
  appId: string;
}

const props = withDefaults(defineProps<Props>(), {
  appId: () => {
    return "";
  },
});

/**
 * 提交
 * @param data
 */
const handleSubmit = async () => {
  if (!props.appId) {
    return;
  }
  let res: any;
  if (updateID.value) {
    res = await editScoringResultUsingPost({
      id: updateID.value as any,
      ...form.value,
    });
  } else {
    res = await addScoringResultUsingPost({
      appId: props.appId as any,
      ...form.value,
    });
  }

  if (res.data.code === 0) {
    await loginUserStore.fetchLoginUser();
    meassage.success("创建成功");
    tableRef.value.loadData();
  } else {
    meassage.error("创建失败," + res.data.message);
  }
};

const updateID = ref<any>();

const doUpdate = (scoringResult: API.ScoringResultVO) => {
  updateID.value = scoringResult.id;
  form.value = scoringResult;
};
if (tableRef.value) {
  tableRef.value.loadData();
  updateID.value == undefined;
}
</script>
